<template>
	<view>
		<uni-search-bar placeholder="搜索" v-model="params.name" bgColor="#EEEEEE" @confirm="search" @input="search"
			@cancel="cancel" @clear="clear" />

		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item,index) in photoList" :right-options="options" :show="isOpened"
				:auto-close="true" @change="swipeChange($event, index)" @click="swipeClick($event, item)">
				<!-- <view class="content-box" @click="contentClick($event, item)">
					<text class="content-text">{{item.name}} : {{item.count}} - {{item.unit}}</text>
				</view> -->
				<view class="content-box" @click="contentClick($event, item)">
					<uni-row class="demo-uni-row content-box">
						<uni-col :span="14">
							{{item.photoType}} - {{item.name}}
						</uni-col>
						<uni-col :span="10">
							{{dateFormat(item.createTime)}}
						</uni-col>
					</uni-row>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<uni-fab ref="fab" :horizontal="horizontal" :vertical="vertical" :direction="direction" @fabClick="addClick" />
	</view>
</template>

<script>
	import {
		getPhotoList,
		deletePhoto
	} from '@/api/record/photo.js'
	import {
		getDictDataList
	} from '@/api/system/dict.js'
	export default {
		data() {
			return {
				isOpened: "none",
				options: [{
					text: '详情',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				isToEnd: false,
				params: {
					name: '',
					pageNum: 1,
					pageSize: 13
				},
				dictQuery: {
					pageNum: 1,
					pageSize: 100,
					dictType: "photo_type"
				},
				dictPhotoType: [],
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				photoList: []
			}
		},
		onLoad() {
			var that = this;
			getDictDataList(that.dictQuery).then(response => {
				that.dictPhotoType = response.rows;
				this.getPhoto()
			});
		},
		onReachBottom() {
			if (this.isToEnd) {
				return
			}
			console.log(this.isToEnd)
			var index = this.params.pageNum
			this.params.pageNum = index + 1
			var that = this;
			var data = this.params
			getPhotoList(data).then(response => {
				if (response.rows.length < that.params.pageSize) {
					that.isToEnd = true;
				}
				for (var item of response.rows) {
					that.photoList.push(item)
				}

				console.log(that.photoList)
			});
		},
		methods: {
			getPhoto() {
				this.params.pageNum = 1;
				this.isToEnd = false;
				var data = this.params;
				console.log(data)
				var that = this;
				getPhotoList(data).then(response => {
					that.photoList = response.rows;
					var temp = response.rows;
					console.log("--getDictDataList--")
					console.log(temp)
					for (var i = 0; i < that.photoList.length; i++) {
						for (var j = 0; j < that.dictPhotoType.length; j++) {
							console.log(that.dictPhotoType[j].dictType)
							if (that.photoList[i].photoType == that.dictPhotoType[j].dictValue) {
								that.photoList[i].photoType = that.dictPhotoType[j].dictLabel;
								break;
							}
						}
					}
				});
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "-" + month + "-" + day;
			},
			detailclick(item) {
				console.log("swipeClick:");
				console.log(item);
				uni.navigateTo({
					url: '/pages/package/work/photo/detail?photoId=' + item.photoId
				});
			},
			addClick() {
				uni.navigateTo({
					url: '/pages/package/work/photo/add'
				});
			},
			clear() {
				console.log("clear")
				this.params.name = '';
			},
			cancel() {
				console.log("cancel")
				this.params.name = '';
			},
			search() {
				console.log("search")
				this.getPhoto()
			},
			contentClick(e, item) {
				uni.navigateTo({
					url: '/pages/package/work/photo/detail?photoId=' + item.photoId
				});
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			},
			swipeClick(e, item) {
				console.log("swipeClick:");
				console.log(e);
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
				console.log(item);
				var that = this;
				if (e.content.text == "详情") {
					uni.navigateTo({
						url: '/pages/package/work/photo/detail?photoId=' + item.photoId
					});
				} else if (e.content.text == "删除") {
					uni.showModal({
						title: '提示',
						content: '是否要删除该数据！',
						success: function(res) {
							if (res.confirm) {
								deletePhoto(item.photoId).then(response => {
									console.log(response)
									that.photoList.forEach(function(it, index, arr) {
										if (it.photoId == item.photoId) {
											that.photoList.splice(index, 1);
											return;
										}
									});
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

				}
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}

	.box {
		border-radius: 50%;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		background-color: #b67bdf;
		color: #fff;
		font-size: 12px;
		margin-top: 6px;
	}

	.box-text {
		text-align: center;
		color: #fff;
		font-size: 18px;
		font-weight: bolder;
	}
</style>